<template>
    <div class="layout">
        <!-- 顶部栏 -->
        <div class="top-bar">
            <div class="top-left-container">
                <img
                    src="../pic/insight-web-ui/insight-web-ui/assets/logo.png"
                    alt="Logo"
                    class="logo"
                />
                <h1 class="top">战略微头条</h1>
            </div>

            <div class="user-lang-area">
                <div class="avatar">
                    <i class="iconfont icon-caixukun"></i>
                </div>
                <span class="username">iKun</span>
                <el-dropdown trigger="click" placement="bottom-end">
                    <div class="lang-trigger">
                        <i class="iconfont icon-yuyanqiehuan"></i>
                        <span class="lang-text">
                            {{ currentGlobalLang === 'zh-CN' ? '中文' : 'English' }}
                        </span>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handleLangChange('zh-CN')">
                                <i class="iconfont icon-zhongguoguoqi"></i>
                                <span>简体中文</span>
                            </el-dropdown-item>
                            <el-dropdown-item @click="handleLangChange('en-US')">
                                <i class="iconfont icon-meiguoguoqi"></i>
                                <span>English</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>

        <!-- 主体内容 -->
        <div class="main-content">
            <div class="left-menu">
                <!-- 关键修改：将 default-active 绑定到当前路由路径 -->
                <el-menu
                    :default-active="currentRoute.path" 
                    class="el-menu-vertical-demo"
                    router  
                    text-align="center"
                    @select="handleMenuSelect" 
                >
                    <el-menu-item index="/home">
                        <i class="iconfont icon-xinwenchi" style="margin-right: 8px"></i>
                        <span>新闻池</span>
                    </el-menu-item>
                    <el-menu-item index="/news-publish">
                        <i class="iconfont icon-xinwenfabu" style="margin-right: 8px"></i>
                        <span>新闻发布</span>
                    </el-menu-item>
                    <el-menu-item index="/published-news">
                        <i class="iconfont icon-yifabu" style="margin-right: 8px"></i>
                        <span>已发布新闻</span>
                    </el-menu-item>
                    <el-menu-item index="/system-management">
                        <i class="iconfont icon-xitongguanli" style="margin-right: 8px"></i>
                        <span>系统管理</span>
                    </el-menu-item>
                    <el-menu-item index="/log-management">
                        <i class="iconfont icon-rizhiguanli" style="margin-right: 8px"></i>
                        <span>日志管理</span>
                    </el-menu-item>
                    <el-menu-item index="/notification-management">
                        <i class="iconfont icon-tongzhiguanli" style="margin-right: 8px"></i>
                        <span>通知管理</span>
                    </el-menu-item>
                    <el-menu-item index="/internationalization-management">
                        <i class="iconfont icon-guojihua" style="margin-right: 8px"></i>
                        <span>国际化管理</span>
                    </el-menu-item>
                </el-menu>
            </div>

            <div class="right-content">
                <router-view />
            </div>
        </div>
    </div>
</template>

<script setup>
import { inject } from 'vue'
import { useRoute } from 'vue-router'  
import '../icon/iconfont.css'

// 获取当前路由实例
const currentRoute = useRoute()

// 语言相关逻辑
const currentGlobalLang = inject('currentGlobalLang')
const updateGlobalLang = inject('updateGlobalLang')

const handleLangChange = (lang) => {
    updateGlobalLang(lang)
}

// 可选：菜单选中事件（如需额外处理）
const handleMenuSelect = (index) => {
    // index 为选中的菜单路由路径，可在这里添加额外逻辑
    console.log('选中菜单：', index)
}
</script>

<style scoped>
.layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* 顶部栏样式 */
.top-bar {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
}
.top-left-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.top {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    text-align: left;
}
.logo {
    width: 80px;
    height: 40px;
    margin: 0;
}

/* 主体内容样式 */
.main-content {
    display: flex;
    flex: 1;
}
.left-menu {
    width: 200px;
    background-color: #f5f7fa;
    border-right: 1px solid #eee;
    padding-top: 15px;
}
.el-menu-vertical-demo {
    --el-menu-text-align: left !important;
    padding-left: 20px !important;
}
/* 高亮菜单样式（可自定义） */
.el-menu-item.is-active {
    color: #409eff !important;  /* 高亮文字颜色 */
    background-color: #ecf5ff !important;  /* 高亮背景色 */
}
.el-menu-item i.iconfont {
    font-size: 16px;
}
.right-content {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* 用户与语言切换区域样式 */
.user-lang-area {
    display: flex;
    align-items: center;
    gap: 15px;
}
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.username {
    font-size: 14px;
    color: #303133;
}
.lang-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #606266;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.lang-trigger:hover {
    background-color: #f5f7fa;
}
.lang-text {
    white-space: nowrap;
}
</style>